<template>
  <div style="background: #fff; padding: 59px 59px">
    <div class="fc">
      <div class="Title">
        <span class="cos">{{ state.tital }}站点活动列表</span> /
        <span class="cos">{{ state.siteName }}</span> / {{ state.reporeName }}
      </div>
      <div class="backBtn" @click="backRouterView">返回</div>
    </div>
    <el-scrollbar style="margin-bottom: 20px" height="700px">
      <div id="appView">
        <template v-for="(item, index) in state.reportList" :key="index">
        <template v-if="item.sort_order == 13">
          <div class="caseTitle">
            <div class="line"></div>
            <div style="letter-spacing: 0.1rem">{{ item.title }}</div>
          </div>
          <div class="flexBox">
            <div style="margin-right: 168px">
              形家现场负责人：{{ item.controller }}
            </div>
            <div>搭建工厂名称：{{ item.factory }}</div>
          </div>
          <div class="flexBox mt mb">
            <div class="flexBox_jc mr_a">
              <div class="mr">搭建工厂现场负责人</div>
              <div class="minbox">{{ item.person }}</div>
            </div>
            <div class="flexBox_jc mr_a">
              <div class="mr">工厂工人数量</div>
              <div class="minbox">{{ item.peopleNumber }}</div>
            </div>
            <div class="flexBox_jc mr_a">
              <div class="mr">临时工人数量</div>
              <div class="minbox">{{ item.TpeopleNumber }}</div>
            </div>
          </div>
          <div class="pinfenBox mb-55">
            <div class="mr_a">
              <div class="fs mb-20">展具新旧程度（5分最高，1分最低）</div>
              <div class="xinBox">
                <el-rate v-model="item.toolScore" size="large" />
              </div>
            </div>
            <div class="mr_a">
              <div class="fs mb-20">搭建质量效果（5分最高，1分最低）</div>
              <div class="xinBox">
                <el-rate v-model="item.qualityScore" size="large" />
              </div>
            </div>
            <div class="mr_a">
              <div class="fs mb-20">搭建进度管理（5分最高，1分最低）</div>
              <div class="xinBox">
                <el-rate v-model="item.progress" size="large" />
              </div>
            </div>
            <div>
              <div class="fs mb-20">工人工作态度（5分最高，1分最低）</div>
              <div class="xinBox">
                <el-rate v-model="item.attitudeScore" size="large" />
              </div>
            </div>
          </div>
          <div style="margin-bottom: 10px">情况说明</div>
          <div class="textBox">{{ item.concrete }}</div>
        </template>
        <template v-if="item.sort_order == 14">
          <div class="caseTitle">
            <div class="line"></div>
            <div style="letter-spacing: 0.1rem">{{ item.title }}</div>
          </div>
          <template v-for="(items, idx) in item.list" :key="idx">
            <div class="smallTitle">{{ items.title }}</div>
           <div class="f_box">
            <div class="f_a">
              <div>{{items.autoShow.name}}</div>
              <div>{{items.autoShow.value}}</div>
            </div>
            <div class="f_a">
              <div>{{items.responsible.name}}</div>
              <div>{{items.responsible.value}}</div>
            </div>
           </div>
            <template v-if="idx == 0">
              <el-table
                stripe
                :data="filterTableData"
                :header-cell-style="{
                  'text-align': 'center',
                  background: '#f2f3f5',
                  height: '60px',
                  color: '#000000',
                  'font-size': '20px',
                }"
                :cell-style="{ 'text-align': 'center', height: '70px' }"
                style="width: 100%"
              >
                <el-table-column
                  label="评定项目"
                  prop="flowTitle"
                  style="font-size: 15px"
                  width="200"
                />
                <el-table-column
                  label="配合度评分"
                  prop="radioList"
                  min-width="100"
                >
                  <template v-slot="scope">
                    <!--重写样式 -->
                    <div class="checkBox_tz">
                      <div class="checkBox_z" v-for="(g, h) in scope.row.radioList" :key="h">
                        <template v-if="scope.row.type == 'radio'">
                          <div class="spacebox_z">
                            <template v-if="h == 0">
                              <!-- 没有选中的 -->
                              <div class="space_z" :style="scope.row.radioList[scope.row.radio_a] != scope.row.radioList[0] ? 'background-color: #c1c1c1' : 'background-color: #000'"></div>
                              <div>{{ g }}</div>
                            </template>
                            <template v-if="h == 1">
                              <!-- 没有选中的 -->
                              <div class="space_z" :style="scope.row.radioList[scope.row.radio_a] != scope.row.radioList[1] ? 'background-color: #c1c1c1' : 'background-color: #000'"></div>
                              <div>{{ g }}</div>
                            </template>
                            <template v-if="h == 2">
                              <!-- 没有选中的 -->
                              <div class="space_z" :style="scope.row.radioList[scope.row.radio_a] != scope.row.radioList[2] ? 'background-color: #c1c1c1' : 'background-color: #000'"></div>
                              <div>{{ g }}</div>
                            </template>
                          </div>
                        </template>
                        <template v-if="scope.row.type == 'checkbox'">
                          <template v-if="h == 0">
                            <div class="spacebox_z">
                              <div v-if="scope.row.radio_a.includes(0)" class="space_z" style="background-color: #000"></div>
                              <div v-else class="space_z" style="background-color: #c1c1c1"></div>
                              <div>{{ g }}</div>
                            </div>
                          </template>
                          <template v-if="h == 1">
                            <div class="spacebox_z">
                              <div v-if="scope.row.radio_a.includes(1)" class="space_z" style="background-color: #000"></div>
                              <div v-else class="space_z" style="background-color: #c1c1c1"></div>
                              <div>{{ g }}</div>
                            </div>
                          </template>
                          <template v-if="h == 2">
                            <div class="spacebox_z">
                              <div v-if="scope.row.radio_a.includes(2)" class="space_z" style="background-color: #000"></div>
                              <div v-else class="space_z" style="background-color: #c1c1c1"></div>
                              <div>{{ g }}</div>
                            </div>
                          </template>
                        </template>
                      </div>
                    </div>
                  </template>
                </el-table-column>
              </el-table>
            </template>
            <template v-if="idx == 1">
              <el-table 
                stripe
                :data="filterTableData_a"
                :header-cell-style="{
                  'text-align': 'center',
                  background: '#f2f3f5',
                  height: '60px',
                  color: '#000000',
                  'font-size': '20px',
                }"
                :cell-style="{ 'text-align': 'center', height: '70px' }"
                style="width: 100%"
              >
                <el-table-column
                  label="评定项目"
                  prop="flowTitle"
                  style="font-size: 15px"
                  width="200"
                />
                <el-table-column
                  label="配合度评分"
                  prop="radioList"
                  min-width="100"
                >
                  <template v-slot="scope">
                    <!--重写样式 -->
                    <div class="checkBox_tz">
                      <div class="checkBox_z" v-for="(g, h) in scope.row.radioList" :key="h">
                        <template v-if="scope.row.type == 'radio'">
                          <div class="spacebox_z">
                            <template v-if="h == 0">
                              <!-- 没有选中的 -->
                              <div class="space_z" :style="scope.row.radioList[scope.row.radio_a] != scope.row.radioList[0] ? 'background-color: #c1c1c1' : 'background-color: #000'"></div>
                              <div>{{ g }}</div>
                            </template>
                            <template v-if="h == 1">
                              <!-- 没有选中的 -->
                              <div class="space_z" :style="scope.row.radioList[scope.row.radio_a] != scope.row.radioList[1] ? 'background-color: #c1c1c1' : 'background-color: #000'"></div>
                              <div>{{ g }}</div>
                            </template>
                            <template v-if="h == 2">
                              <!-- 没有选中的 -->
                              <div class="space_z" :style="scope.row.radioList[scope.row.radio_a] != scope.row.radioList[2] ? 'background-color: #c1c1c1' : 'background-color: #000'"></div>
                              <div>{{ g }}</div>
                            </template>
                          </div>
                        </template>
                        <template v-if="scope.row.type == 'checkbox'">
                          <template v-if="h == 0">
                            <div class="spacebox_z">
                              <div v-if="scope.row.radio_a.includes(0)" class="space_z" style="background-color: #000"></div>
                              <div v-else class="space_z" style="background-color: #c1c1c1"></div>
                              <div>{{ g }}</div>
                            </div>
                          </template>
                          <template v-if="h == 1">
                            <div class="spacebox_z">
                              <div v-if="scope.row.radio_a.includes(1)" class="space_z" style="background-color: #000"></div>
                              <div v-else class="space_z" style="background-color: #c1c1c1"></div>
                              <div>{{ g }}</div>
                            </div>
                          </template>
                          <template v-if="h == 2">
                            <div class="spacebox_z">
                              <div v-if="scope.row.radio_a.includes(2)" class="space_z" style="background-color: #000"></div>
                              <div v-else class="space_z" style="background-color: #c1c1c1"></div>
                              <div>{{ g }}</div>
                            </div>
                          </template>
                        </template>
                      </div>
                    </div>
                  </template>
                </el-table-column>
              </el-table>
            </template>
            <template v-if="idx == 2">
              <el-table
                stripe
                :data="filterTableData_b"
                :header-cell-style="{
                  'text-align': 'center',
                  background: '#f2f3f5',
                  height: '60px',
                  color: '#000000',
                  'font-size': '20px',
                }"
                :cell-style="{ 'text-align': 'center', height: '70px' }"
                style="width: 100%"
              >
                <el-table-column
                  label="评定项目"
                  prop="flowTitle"
                  style="font-size: 15px"
                  width="200"
                />
                <el-table-column
                  label="配合度评分"
                  prop="radioList"
                  min-width="100"
                >
                  <template v-slot="scope">
                    <!--重写样式 -->
                    <div class="checkBox_tz">
                      <div class="checkBox_z" v-for="(g, h) in scope.row.radioList" :key="h">
                        <template v-if="scope.row.type == 'radio'">
                          <div class="spacebox_z">
                            <template v-if="h == 0">
                              <!-- 没有选中的 -->
                              <div class="space_z" :style="scope.row.radioList[scope.row.radio_a] != scope.row.radioList[0] ? 'background-color: #c1c1c1' : 'background-color: #000'"></div>
                              <div>{{ g }}</div>
                            </template>
                            <template v-if="h == 1">
                              <!-- 没有选中的 -->
                              <div class="space_z" :style="scope.row.radioList[scope.row.radio_a] != scope.row.radioList[1] ? 'background-color: #c1c1c1' : 'background-color: #000'"></div>
                              <div>{{ g }}</div>
                            </template>
                            <template v-if="h == 2">
                              <!-- 没有选中的 -->
                              <div class="space_z" :style="scope.row.radioList[scope.row.radio_a] != scope.row.radioList[2] ? 'background-color: #c1c1c1' : 'background-color: #000'"></div>
                              <div>{{ g }}</div>
                            </template>
                          </div>
                        </template>
                        <template v-if="scope.row.type == 'checkbox'">
                          <template v-if="h == 0">
                            <div class="spacebox_z">
                              <div v-if="scope.row.radio_a.includes(0)" class="space_z" style="background-color: #000"></div>
                              <div v-else class="space_z" style="background-color: #c1c1c1"></div>
                              <div>{{ g }}</div>
                            </div>
                          </template>
                          <template v-if="h == 1">
                            <div class="spacebox_z">
                              <div v-if="scope.row.radio_a.includes(1)" class="space_z" style="background-color: #000"></div>
                              <div v-else class="space_z" style="background-color: #c1c1c1"></div>
                              <div>{{ g }}</div>
                            </div>
                          </template>
                          <template v-if="h == 2">
                            <div class="spacebox_z">
                              <div v-if="scope.row.radio_a.includes(2)" class="space_z" style="background-color: #000"></div>
                              <div v-else class="space_z" style="background-color: #c1c1c1"></div>
                              <div>{{ g }}</div>
                            </div>
                          </template>
                        </template>
                      </div>
                    </div>
                  </template>
                </el-table-column>
              </el-table>
            </template>
          </template>
        </template>
        <template v-if="item.sort_order == 15">
          <div class="caseTitle" style="margin-top: 20px;">
            <div class="line"></div>
            <div style="letter-spacing: 0.1rem">{{ item.title }}</div>
          </div>
          <template v-for="(items, idx) in item.list" :key="idx">
            <div class="smallTitle">{{ items.title }}</div>
           <div class="f_box">
            <div class="f_a">
              <div>{{items.autoShow.name}}</div>
              <div>{{items.autoShow.value}}</div>
            </div>
            <div class="f_a">
              <div>{{items.responsible.name}}</div>
              <div>{{items.responsible.value}}</div>
            </div>
           </div>
            <template v-if="idx == 0">
              <el-table
                stripe
                :data="filterTableData_d"
                :header-cell-style="{
                  'text-align': 'center',
                  background: '#f2f3f5',
                  height: '60px',
                  color: '#000000',
                  'font-size': '20px',
                }"
                :cell-style="{ 'text-align': 'center', height: '70px' }"
                style="width: 100%"
              >
                <el-table-column
                  label="评定项目"
                  prop="flowTitle"
                  style="font-size: 15px"
                  width="200"
                />
                <el-table-column
                  label="配合度评分"
                  prop="radioList"
                  min-width="100"
                >
                  <template v-slot="scope">
                    <!--重写样式 -->
                    <div class="checkBox_tz">
                      <div class="checkBox_z" v-for="(g, h) in scope.row.radioList" :key="h">
                        <template v-if="scope.row.type == 'radio'">
                          <div class="spacebox_z">
                            <template v-if="h == 0">
                              <!-- 没有选中的 -->
                              <div class="space_z" :style="scope.row.radioList[scope.row.radio_a] != scope.row.radioList[0] ? 'background-color: #c1c1c1' : 'background-color: #000'"></div>
                              <div>{{ g }}</div>
                            </template>
                            <template v-if="h == 1">
                              <!-- 没有选中的 -->
                              <div class="space_z" :style="scope.row.radioList[scope.row.radio_a] != scope.row.radioList[1] ? 'background-color: #c1c1c1' : 'background-color: #000'"></div>
                              <div>{{ g }}</div>
                            </template>
                            <template v-if="h == 2">
                              <!-- 没有选中的 -->
                              <div class="space_z" :style="scope.row.radioList[scope.row.radio_a] != scope.row.radioList[2] ? 'background-color: #c1c1c1' : 'background-color: #000'"></div>
                              <div>{{ g }}</div>
                            </template>
                          </div>
                        </template>
                        <template v-if="scope.row.type == 'checkbox'">
                          <template v-if="h == 0">
                            <div class="spacebox_z">
                              <div v-if="scope.row.radio_a.includes(0)" class="space_z" style="background-color: #000"></div>
                              <div v-else class="space_z" style="background-color: #c1c1c1"></div>
                              <div>{{ g }}</div>
                            </div>
                          </template>
                          <template v-if="h == 1">
                            <div class="spacebox_z">
                              <div v-if="scope.row.radio_a.includes(1)" class="space_z" style="background-color: #000"></div>
                              <div v-else class="space_z" style="background-color: #c1c1c1"></div>
                              <div>{{ g }}</div>
                            </div>
                          </template>
                          <template v-if="h == 2">
                            <div class="spacebox_z">
                              <div v-if="scope.row.radio_a.includes(2)" class="space_z" style="background-color: #000"></div>
                              <div v-else class="space_z" style="background-color: #c1c1c1"></div>
                              <div>{{ g }}</div>
                            </div>
                          </template>
                        </template>
                      </div>
                    </div>
                  </template>
                </el-table-column>
              </el-table>
            </template>
            <template v-if="idx == 1">
              <el-table 
                stripe
                :data="filterTableData_e"
                :header-cell-style="{
                  'text-align': 'center',
                  background: '#f2f3f5',
                  height: '60px',
                  color: '#000000',
                  'font-size': '20px',
                }"
                :cell-style="{ 'text-align': 'center', height: '70px' }"
                style="width: 100%"
              >
                <el-table-column
                  label="评定项目"
                  prop="flowTitle"
                  style="font-size: 15px"
                  width="200"
                />
                <el-table-column
                  label="配合度评分"
                  prop="radioList"
                  min-width="100"
                >
                  <template v-slot="scope">
                    <!--重写样式 -->
                    <div class="checkBox_tz">
                      <div class="checkBox_z" v-for="(g, h) in scope.row.radioList" :key="h">
                        <template v-if="scope.row.type == 'radio'">
                          <div class="spacebox_z">
                            <template v-if="h == 0">
                              <!-- 没有选中的 -->
                              <div class="space_z" :style="scope.row.radioList[scope.row.radio_a] != scope.row.radioList[0] ? 'background-color: #c1c1c1' : 'background-color: #000'"></div>
                              <div>{{ g }}</div>
                            </template>
                            <template v-if="h == 1">
                              <!-- 没有选中的 -->
                              <div class="space_z" :style="scope.row.radioList[scope.row.radio_a] != scope.row.radioList[1] ? 'background-color: #c1c1c1' : 'background-color: #000'"></div>
                              <div>{{ g }}</div>
                            </template>
                            <template v-if="h == 2">
                              <!-- 没有选中的 -->
                              <div class="space_z" :style="scope.row.radioList[scope.row.radio_a] != scope.row.radioList[2] ? 'background-color: #c1c1c1' : 'background-color: #000'"></div>
                              <div>{{ g }}</div>
                            </template>
                          </div>
                        </template>
                        <template v-if="scope.row.type == 'checkbox'">
                          <template v-if="h == 0">
                            <div class="spacebox_z">
                              <div v-if="scope.row.radio_a.includes(0)" class="space_z" style="background-color: #000"></div>
                              <div v-else class="space_z" style="background-color: #c1c1c1"></div>
                              <div>{{ g }}</div>
                            </div>
                          </template>
                          <template v-if="h == 1">
                            <div class="spacebox_z">
                              <div v-if="scope.row.radio_a.includes(1)" class="space_z" style="background-color: #000"></div>
                              <div v-else class="space_z" style="background-color: #c1c1c1"></div>
                              <div>{{ g }}</div>
                            </div>
                          </template>
                          <template v-if="h == 2">
                            <div class="spacebox_z">
                              <div v-if="scope.row.radio_a.includes(2)" class="space_z" style="background-color: #000"></div>
                              <div v-else class="space_z" style="background-color: #c1c1c1"></div>
                              <div>{{ g }}</div>
                            </div>
                          </template>
                        </template>
                      </div>
                    </div>
                  </template>
                </el-table-column>
              </el-table>
            </template>
          </template>
        </template>
        <template v-if="item.sort_order == 16">
          <div class="caseTitle" style="margin-top: 30px;">
            <div class="line"></div>
            <div style="letter-spacing: 0.1rem">{{ item.title }}</div>
          </div>
          <el-table :show-header="false" :data="state.expoTable" stripe style="width: 100%" :cell-style="{ height: '70px' }">
            <el-table-column prop="date" label="Date" width="180">
              <template v-slot="scope">
                <div style="font-size: 17px; font-weight: 600;">{{ scope.row.date }}</div>
              </template>
            </el-table-column>
            <el-table-column prop="name" label="Name" min-width="180" />
          </el-table>
        </template>
        <template v-if="item.sort_order == 17">
          <div class="caseTitle" style="margin-top: 30px;">
            <div class="line"></div>
            <div style="letter-spacing: 0.1rem">{{ item.title }}</div>
          </div>
          <el-table :show-header="false" :data="state.buildTable" stripe style="width: 100%" :cell-style="{ height: '70px' }">
            <el-table-column prop="date" label="Date" width="220">
              <template v-slot="scope">
                <div style="font-size: 17px; font-weight: 600;">{{ scope.row.date }}</div>
              </template>
            </el-table-column>
            <el-table-column prop="name" label="Name" min-width="180" />
          </el-table>
        </template>
      </template>
      </div>
      <div class="btnBox">
        <div v-if="state.isShowshot && state.reportList.length != 0" class="linkBtn" @click="clickScreenshot">
          点击截图
        </div>
      </div>
    </el-scrollbar>
  </div>
</template>

<script setup>
import { toRefs, reactive, computed, onMounted, ref } from "vue";
import { useRoute } from "vue-router";
import router from "../router/index";
import http from "../libs/http"; 
import html2canvas from "html2canvas";

const state = reactive({
  sidVal: "",
  tidval: "",
  levelVal: "",
  statusVal: "",
  reportList: "",
  xinVal: 4,

  tital: "",
  siteName: "",
  reporeName: "",

  // 布展总结渲染数据

  // 各方配合度总表格
  matchTable: "",
  matchTable_a: "",
  matchTable_b: "",

  // 各方配合度DE总表格
  matchTableDE: "",
  matchTableDE_a: "",

  // 展会情况总结
  expoTable: "",
  // 搭建情况总结
  buildTable: "",

  isShowshot: false, //是否显示截图按钮
});
// 初始化页面数据
onMounted(() => {
  // 接受传进来的参数
  const route = useRoute();
  //     console.log(
  //     "route接受到的参数>>>>>>>>>>>>>>>>",
  //     Number(route.query.sid),
  //     '????????站点ID',
  //     Number(route.query.tid),
  //     ">>>>>>>>>>>>>>>",
  //     route.query.level,
  //     route.query.status
  //   );
  state.sidVal = Number(route.query.sid);
  state.tidval = Number(route.query.tid);
  state.levelVal = Number(route.query.level);
  state.statusVal = Number(route.query.status);
  state.tital = route.query.titleName;
  state.siteName = route.query.siteName;
  state.reporeName = route.query.reportTitle;
  getReportLists();
});

// 获取报告列表数据
const getReportLists = async () => {
  let param = {
    openid: localStorage.getItem("openid"),
    sid: state.sidVal,
    sitetype: state.tidval,
    table_level: state.levelVal,
    type_status: state.statusVal,
  };
  console.log(">>>>>>>>>>>接口需要的接口参数", param);
  const res = await http.$get("/apies/backend/getReportLists", param);
  if (res.code == 200) {
    console.log("请求接口参数成功啦啦啦啦啦啦啦啦啦", res.data);
    //   let newReport = []
    //     res.data.map( i => {
    //         newReport.push({
    //           bigline_pic: i.bigline_pic,
    //           line_pic: i.line_pic,
    //           problem: i.problem,
    //           situation: i.situation,
    //           status: i.status == 1 ? '正常' : i.status == 0 ? '异常' : '',
    //           title: i.title
    //         })
    //     })
    state.reportList = res.data;
    if (res.data.length != 0) {
      state.isShowshot = true
    }
    // 重组所有表格数据
    res.data.map((i) => {
      switch (i.sort_order) {
        case 14:
          // 配合度
          let teamList = i.list;
          let radioVal = [];
          let checkBoxVal = [];
          let radioArr = [];
          let checkBoxVal_a = [];
          let radioArr_a = [];
          let checkBoxVal_b = [];
          let radioArr_b = [];
          let newTeamList = [];
          let newTeamList_a = [];
          let newTeamList_b = [];
          console.log(">>>>>>配合度数组", teamList[0]);
          // 配合报告一
          teamList[0].list.map((j, y) => {
            if (j.type == "checkbox") {
              j.result.map((g) => {
                console.log(g, ">>>>>");
                checkBoxVal.push(j.radioList[Number(g) - 1]);
                radioArr.push(Number(g) - 1)
              });
              console.log(checkBoxVal, ">>>>>");
            }
            // 区分多选和单选
            newTeamList.push({
              flowTitle: j.title,
              radioList: j.radioList,
              radio:
                j.type == "radio"
                  ? [j.radioList[j.radio - 1]]
                  : j.type == "checkbox"
                  ? checkBoxVal
                  : "",
              type: j.type,
              radio_a: j.type == "radio" ? Number(j.radio - 1) : j.type == "checkbox" ? radioArr : ""
            });
          });
          // 配合报告二
          teamList[1].list.map((j, y) => {
            if (j.type == "checkbox") {
              j.result.map((g) => {
                checkBoxVal_a.push(j.radioList[Number(g) - 1]);
                radioArr_a.push(Number(g) - 1)
              });
              console.log(checkBoxVal_a, ">>>>>");
            }
            // 区分多选和单选
            newTeamList_a.push({
              flowTitle: j.title,
              radioList: j.radioList,
              radio:
                j.type == "radio"
                  ? [j.radioList[j.radio - 1]]
                  : j.type == "checkbox"
                  ? checkBoxVal_a
                  : "",
              type: j.type,
              radio_a: j.type == "radio" ? Number(j.radio - 1) : j.type == "checkbox" ? radioArr_a : ""
            });
          });
          // 配合报告三
          teamList[2].list.map((j, y) => {
            if (j.type == "checkbox") {
              j.result.map((g) => {
                checkBoxVal_b.push(j.radioList[Number(g) - 1]);
                radioArr_b.push(Number(g) - 1)
              });
              console.log(checkBoxVal_b, ">>>>>");
            }
            // 区分多选和单选
            newTeamList_b.push({
              flowTitle: j.title,
              radioList: j.radioList,
              radio:
                j.type == "radio"
                  ? [j.radioList[j.radio - 1]]
                  : j.type == "checkbox"
                  ? checkBoxVal_b
                  : "",
              type: j.type,
              radio_a: j.type == "radio" ? Number(j.radio - 1) : j.type == "checkbox" ? radioArr_b : ""
            });
          });

          console.log(newTeamList, ">>>>>>>>>>>数组重构好了");
          state.matchTable = newTeamList;
          state.matchTable_a = newTeamList_a;
          state.matchTable_b = newTeamList_b;
          break;
        case 15:
          // 会展DC
          let teamListDE = i.list;
          let checkBoxValDE = [];
          let radioArrDE = [];
          let checkBoxValDE_a = [];
          let radioArrDE_a = [];
          let newTeamListDE = [];
          let newTeamListDE_a = [];
          // 配合报告一
          teamListDE[0].list.map((j, y) => {
            if (j.type == "checkbox") {
              j.result.map((g) => {
                checkBoxValDE.push(j.radioList[Number(g) - 1]);
                radioArrDE.push(Number(g) - 1)
              });
              console.log(checkBoxValDE, ">>>>>");
            }
            // 区分多选和单选
            newTeamListDE.push({
              flowTitle: j.title,
              radioList: j.radioList,
              radio:
                j.type == "radio"
                  ? [j.radioList[j.radio - 1]]
                  : j.type == "checkbox"
                  ? checkBoxValDE
                  : "",
              type: j.type,
              radio_a: j.type == "radio" ? Number(j.radio - 1) : j.type == "checkbox" ? radioArrDE : ""
            });
          });
          // 配合报告二
          teamListDE[1].list.map((j, y) => {
            if (j.type == "checkbox") {
              j.result.map((g) => {
                checkBoxValDE_a.push(j.radioList[Number(g) - 1]);
                radioArrDE_a.push(Number(g) - 1)
              });
              console.log(checkBoxValDE_a, ">>>>>");
            }
            // 区分多选和单选
            newTeamListDE_a.push({
              flowTitle: j.title,
              radioList: j.radioList,
              radio:
                j.type == "radio"
                  ? [j.radioList[j.radio - 1]]
                  : j.type == "checkbox"
                  ? checkBoxValDE_a
                  : "",
              type: j.type,
              radio_a: j.type == "radio" ? Number(j.radio - 1) : j.type == "checkbox" ? radioArrDE_a : ""
            });
          });

          state.matchTableDE = newTeamListDE;
          state.matchTableDE_a = newTeamListDE_a;
          break;
        case 16:
          // 展会总结
          let newExpolist = []
          newExpolist.push({
            date:'参展规模',
            name: i.inputValue1
          },{
            date:'参展品牌数量',
            name: i.inputValue2
          },{
            date:'人流量',
            name: i.inputValue3
          },{
            date:'成交车辆数量',
            name: i.inputValue4
          },{
            date:'成交金额',
            name: i.inputValue5
          },{
            date:'媒体支持',
            name: i.inputValue6
          },{
            date:'主办单位',
            name: i.inputValue7
          },{
            date:'承办单位',
            name: i.inputValue8
          })
          state.expoTable = newExpolist
          break;
        case 17:
          // 搭建问题总结
          let newbuildList = []
          newbuildList.push({
            date:'货车停靠位置',
            name: i.inputValue1
          },{
            date:'卸货装车情况',
            name: i.inputValue2
          },{
            date:'展馆用电情况',
            name: i.inputValue3
          },{
            date:'展馆消防管理',
            name: i.inputValue4
          },{
            date:'搭建时间安排',
            name: i.inputValue5
          },{
            date:'包装箱存放',
            name: i.inputValue6
          })
          state.buildTable = newbuildList
          break;
        default:
          break;
      }
    });
  } else {
    console.log(">>>>>>>>>>接口数据请求失败");
  }
};

// 路由页面回退
const backRouterView = () => {
  router.go(-1);
};
// --------截图开始------------
//图片格式转换方法
const dataURLToBlob = (dataurl) => {
  let arr = dataurl.split(",");
  let mime = arr[0].match(/:(.*?);/)[1];
  let bstr = atob(arr[1]);
  let n = bstr.length;
  let u8arr = new Uint8Array(n);
  while (n--) {
    u8arr[n] = bstr.charCodeAt(n);
  }
  return new Blob([u8arr], { type: mime });
};

// 截取页面长图
const clickScreenshot = () => {
  // 点击按钮,截图时隐藏掉
  state.isShowshot = false;
  var app = document.getElementById("appView");
  let width = app.offsetWidth + 150;
  let height = app.offsetHeight + 600;
  let offsetTop = app.offsetTop;
  let canvas = document.createElement("canvas");
  let context = canvas.getContext('2d');
  let scaleBy = getPixelRatio(context);
  canvas.width = width*scaleBy;
  canvas.height = (height+offsetTop)*scaleBy;
  context.scale(scaleBy,scaleBy);

  setTimeout(() => {
    html2canvas(app, {
      allowTaint:true,
      tainttest:true,
      useCORS: true,
      logging: true,
      scrollY: 0,
      width:width,
      height:height,
      scale:scaleBy, //解决手机一直空白的问题
      canvas:canvas,
      dpi: window.devicePixelRatio * 2, //设备的象素比s
      timeout: 500, // 加载延时
    }).then((canvas) => {
      // let url = canvas.toDataURL(); //把canvas转成base64
      // // 写一个隐藏的按标签，借助按标签的download属性下载图片
      // document.querySelector("#downimg").href = url;
      // document.querySelector("#downimg").download = "img.png";
      // document.querySelector("#downimg").click();
      // state.isShowshot = true;
      console.log(canvas,'>>>>>>>>>>>>>>>>>>>>截取的canvas全图')

      const dataImg = new Image() 
      // 解决跨域 Canvas 污染问题
      dataImg.setAttribute("crossOrigin", "anonymous");
      dataImg.src = canvas.toDataURL('image/png')
      let blob = dataURLToBlob(dataImg.src)
      // 显示一个弹窗
      console.log(blob,'======================', URL.createObjectURL(blob));
      // 转化图片格式,再下载图片
      const alink = document.createElement("a");
      alink.style.display = "none";
      alink.href = dataImg.src;
      // alink.href = URL.createObjectURL(blob);
      alink.download = "Img.jpg";
      document.body.appendChild(alink);
      alink.click();
      document.body.removeChild(alink);
      // console.log(dataImg.src, '======================');    
      state.isShowshot = true;

      // canvas.style.width = width+"px";
      // canvas.style.height = height+"px";
      // var image = new Image();
      // image.src = canvas.toDataURL(); 
      // console.log(image,'>>>>>>>>>>>>')
      // state.isShowshot = true;
    });
  }, 2000);
};
 
const getPixelRatio = (context) => {
    var backingStore = context.backingStorePixelRatio ||
            context.webkitBackingStorePixelRatio ||
            context.mozBackingStorePixelRatio ||
            context.msBackingStorePixelRatio ||
            context.oBackingStorePixelRatio ||
            context.backingStorePixelRatio || 1;
      return (window.devicePixelRatio || 1) / backingStore;
}
// ----------结束--------------




// 显示其他总结报告表格数据
const search = ref("");
const filterTableData = computed(() =>
  state.matchTable.filter(
    (data) =>
      !search.value ||
      data.name.toLowerCase().includes(search.value.toLowerCase())
  )
);

// 显示其他总结报告表格数据
const search_a = ref("");
const filterTableData_a = computed(() =>
  state.matchTable_a.filter(
    (data) =>
      !search_a.value ||
      data.name.toLowerCase().includes(search_b.value.toLowerCase())
  )
);

// 显示其他总结报告表格数据
const search_b = ref("");
const filterTableData_b = computed(() =>
  state.matchTable_b.filter(
    (data) =>
      !search_b.value ||
      data.name.toLowerCase().includes(search_b.value.toLowerCase())
  )
);

//各方配合DE
const search_d = ref("");
const filterTableData_d = computed(() =>
  state.matchTableDE.filter(
    (data) =>
      !search_d.value ||
      data.name.toLowerCase().includes(search_d.value.toLowerCase())
  )
);

const search_e = ref("");
const filterTableData_e = computed(() =>
  state.matchTableDE_a.filter(
    (data) =>
      !search_e.value ||
      data.name.toLowerCase().includes(search_e.value.toLowerCase())
  )
);
</script>

<style scoped>
.Title {
  /* font-weight: 600; */
  font-size: 20px;
  margin-bottom: 20px;
}
.caseTitle {
  display: flex;
  font-size: 20px;
  font-weight: 600;
  margin-bottom: 20px;
}
.line {
  width: 4px;
  height: 28px;
  background-color: #409eff;
  margin-right: 10px;
}

.flexBox {
  display: flex;
}

.minbox {
  width: 180px;
  height: 28px;
  background: #f7f7f7;
  border: 2px solid #e4e6ea;
  border-radius: 3px;
  line-height: 24px;
  box-sizing: border-box;
  padding-left: 5px;
}

.flexBox_jc {
  display: flex;
  align-items: center;
}
.pinfenBox {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
}
.xinBox {
  width: 229px;
  height: 44px;
  background: #f8f9fa;
  border: 1px solid #f8f9fa;
  border-radius: 3px;
}
.textBox {
  width: 772px;
  height: auto;
  padding: 15px 15px 35px 15px;
  background-color: #f7f7f7;
  box-sizing: border-box;
  border-radius: 5px;
  margin-bottom: 20px;
  word-wrap: break-word;
}

.mr {
  margin-right: 15px;
}
.mr_a {
  margin-right: 130px;
  margin-bottom: 15px;
}

.mt {
  margin-top: 40px;
}
.mb-20 {
  margin-bottom: 15px;
}

.mb {
  margin-bottom: 40px;
}
.mb-55 {
  margin-bottom: 55px;
}

::v-deep .el-rate__icon {
  font-size: 40px !important;
}
.cos {
  color: #409eff;
}

.fc {
  display: flex !important;
  justify-content: space-between !important;
}
.backBtn {
  width: 55px !important;
  height: 35px !important;
  background: #f7f7f7 !important;
  border: 2px solid #e4e6ea !important;
  border-radius: 5px !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  margin-bottom: 20px !important;
  cursor: pointer !important;
}
.smallTitle {
  margin: 25px 0;
  font-weight: 600;
  font-size: 18px;
}
.f_a {
  display: flex;
}
.f_a:nth-child(1) {
  margin-bottom: 10px;
}
.f_box {
  margin-bottom: 15px;
}

/* 截图样式 */
.btnBox {
  width: 100%;
  display: flex;
  justify-content: center;
  margin-top: 50px;
}
.linkBtn {
  width: 112px;
  height: 45px;
  background: #409eff;
  border-radius: 3px;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #fff;
  font-size: 17px;
  margin-right: 20px;
  cursor: pointer;
}

/* 改变选择框中的样式 */
.checkBox_z {
  display: flex;
  align-items: center;
  width: 30%;
  /* padding-left: 3%; */
  text-align: start;
}
.checkBox_tz {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

</style>

<style scoped> 
.el-checkbox-group .el-checkbox__inner {
  /* background-color: #f2f3f5 !important; */
  background-color: #c0c0c0 !important;
}
.el-checkbox__input.is-disabled.is-checked .el-checkbox__inner {
  background-color: #000 !important;
}

/* 选择框样式 */
.space_z {
  width: 14px;
  height: 14px;
  border: 1px solid #c0c0c0;
  /* background-color: #000; */
  margin-top: 5px;
  margin-right: 10px
}
.spacebox_z {
  font-size: 15px;
  display: flex;
  justify-content: center;
  justify-items: center;
}
</style>